﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Yahoo! Registration</title>
    <style type="text/css">
        a
        {
            color: Gray;
            text-decoration: none;
        }
        
        a:hover
        {
            color: Gray;
            text-decoration: underline;
            cursor: pointer;
        }
        .toplinks
        {
            width: 100%;
            text-align: right;
            text-decoration: none;
            color: Gray;
        }
        .ErrorTextColor
        {
            background-color:#FFEBEB;
        }
        
        .DefaultTextColor
        {
            color: Gray;
        }
        .NormalTextColor
        {
            color: Black;
        }
        .birthday
        {
            color: White;
        }
        
        .birthday:hover
        {
            color: Blue;
        }
        select
        {
            color: Gray;
        }
    </style>
    <script type="text/javascript" language="javascript">
    function test()
    {
        alert('hi');
    }

    function funcRemoveDefaultText(id, txt) {
        if (id == "BirthDay")
            document.getElementById('spanBirthDay').style.visibility = "visible";

        //if (id == 'FirstName'|| id== 'Surname') {
            var idLocal = document.getElementById(id);
            if (idLocal.value.length == 0 || idLocal.value == txt) {
                idLocal.value = '';

            }
            if (idLocal.attributes["class"].value != "ErrorTextColor")
                idLocal.attributes["class"].value = "NormalTextColor";
    }

    function funcPlaceDefaultText(id, txt) {
        if (id == "BirthDay") 
        {
            var idBDay = document.getElementById(id);
            
            document.getElementById('spanBirthDay').style.visibility = "hidden";

            if (idBDay.value.length == 0 || idBDay.value == txt) 
            {
                idBDay.value = txt;

                idBDay.attributes["class"].value = "DefaultTextColor";
            }
            else
                idBDay.attributes["class"].value = "NormalTextColor";

        }

        if (id == 'First Name' || id == 'Surname') {
            var specialChars = '!@#$%^&*()';
            var idLocal = document.getElementById(id);
            document.getElementById('spanFirstName').style.visibility = "hidden";

            var strVal = idLocal.value;

            for (var i = 0; i < strVal.length; i++) {
                for (var j = 0; j < specialChars.length; j++) {
                    if (specialChars.indexOf(strVal[i], j) != -1) {
                        document.getElementById('spanFirstName').style.visibility = "visible";
                        idLocal.attributes["class"].value = "ErrorTextColor";
                        if (id == 'FirstName')
                            document.getElementById('Surname').attributes["class"].value = "ErrorTextColor";
                        else
                            document.getElementById('FirstName').attributes["class"].value = "ErrorTextColor";
                        return;
                    }
                }
            }
            if (idLocal.value.length == 0 || idLocal.value == txt) {
                idLocal.value = txt;

                idLocal.attributes["class"].value = "DefaultTextColor";
            }
            else
                idLocal.attributes["class"].value = "NormalTextColor";

            if (id == 'FirstName') {
                if (document.getElementById('Surname').value.length == 0 || document.getElementById('Surname').value == "Surname or Initial") {
                    document.getElementById('Surname').value = "Surname or Initial";
                    document.getElementById('Surname').attributes["class"].value = "DefaultTextColor";
                }
                else
                    document.getElementById('Surname').attributes["class"].value = "NormalTextColor";
            }
            else {

                if (document.getElementById('FirstName').value.length == 0 || document.getElementById('FirstName').value == "First Name") {
                    document.getElementById('FirstName').value = "First Name";
                    document.getElementById('FirstName').attributes["class"].value = "DefaultTextColor";
                }
                else
                    document.getElementById('FirstName').attributes["class"].value = "NormalTextColor";

            }

        }
    }
    </script>
</head>
<body>
    <table style="padding-left: 80px; border-color: Gray; margin: 0px" border="0" width="750px">
        <tr>
            <td style="background-image: url('Imgs/Yahoo_bkgrnd.JPG'); background-repeat: repeat-x">
                <table>
                    <tr>
                        <td>
                            <img alt="Yahoo Image" src="Imgs/Yahoo!.JPG" />
                        </td>
                        <td class="toplinks" style="text-align: right">
                            <a href="http://www.yahoo.co.in">Yahoo</a> | <a href="http://help.yahoo.com/l/en-in/yahoo/edit/">
                                Help</a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
        </tr>
        <tr>
            <td>
                With a Yahoo! Account, get free email and other leading web
            </td>
        </tr>
        <tr>
            <td>
                services.
            </td>
        </tr>
        <tr>
            <td>
                <table border="0" width="100%">
                    <tr>
                        <td style="width: 80%">
                            <hr />
                        </td>
                        <td style="width: 20%">
                            &nbsp;
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td width="100%">
                <table border="1">
                    <tr>
                        <td style="width: 100%; padding-left: 50px">
                            <table border="1">
                                <tr>
                                    <td style="width: 60%">
                                        Name
                                        <input id="FirstName" title="First Name" class="DefaultTextColor" type="text" value="First Name"
                                            onblur="funcPlaceDefaultText('FirstName', 'First Name');" 
                                            onfocus="funcRemoveDefaultText('FirstName', 'First Name');" />
                                        &nbsp;<input id="Surname" title="Surname or Initial" class="DefaultTextColor" type="text" value="Surname or Initial" 
                                        onblur="funcPlaceDefaultText('Surname', 'Surname or Initial');"
                                        onfocus="funcRemoveDefaultText('Surname', 'Surname or Initial');" />
                                    </td>
                                    <td style="width: 40%">
                                        <span id="spanFirstName" style="visibility: hidden">Only letters, spaces, hyphens and
                                            apostrophes are allowed </span>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 100%; padding-left: 68px">
                            Sex
                            <!--input type="text" value="Male" /-->
                            <select>
                                <option>-Select one-</option>
                                <option>Male</option>
                                <option>Female</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 100%">
                            <table border="1" cellpadding="2" cellspacing="0">
                                <tr>
                                    <td style="width: 2%; padding-left: 33px; margin-top: 0px">
                                        Birthday
                                    </td>
                                    <td id="BirthDay" class="DefaultTextColor" style="width: 72%;">
                                        <input type="text" value="Day" style="width: 40px"
                                        onblur="funcPlaceDefaultText('BirthDay', 'Day');"
                                        onfocus="funcRemoveDefaultText('BirthDay', 'Day');"
                                         />
                                        <select style="width: 120px">
                                            <option>- Select Month - </option>
                                            <option>January</option>
                                            <option>February</option>
                                            <option>March</option>
                                            <option>April</option>
                                            <option>May</option>
                                            <option>June</option>
                                            <option>July</option>
                                            <option>August</option>
                                            <option>September</option>
                                            <option>October</option>
                                            <option>November</option>
                                            <option>December</option>
                                        </select>
                                        <input type="text" value="Year" style="width: 60px" />
                                    </td>
                                    <td style="width:26%"> 
                                    <span id="spanBirthDay" style="visibility:hidden"> Knowing your birthday lets Yahoo! provide you with a better experience</span>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 100%; padding-left: 40px">
                            Country
                            <select title="Country">
                                <option>India</option>
                                <option>U.S.A</option>
                                <option>U.K</option>
                                <option>Germany</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 100%; padding-left: 32px">
                            Language
                            <select title="Language">
                                <option>English</option>
                                <option>Hindi</option>
                                <option>Kannada</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table border="0" width="100%">
                    <tr>
                        <td style="width: 100%; font-weight: bold; font-family: Arial;">
                            <font color="purple">Select an ID and password</font>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 80%">
                            <hr />
                        </td>
                        <td style="width: 20%">
                            &nbsp;
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>
